<!DOCTYPE html>
<!-- saved from url=(0044)buttons.html -->
<html lang="en"
	class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Notebook | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./buttons_files/font.css" type="text/css">
<link rel="stylesheet" href="./buttons_files/app.v1.css" type="text/css">
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="" style="">
	<section class="vbox">
		<header class="bg-dark dk header navbar navbar-fixed-top-xs">
			<div class="navbar-header aside-md">
				<a class="btn btn-link visible-xs"
					data-toggle="class:nav-off-screen,open" data-target="#nav,html">
					<i class="fa fa-bars"></i>
				</a> <a href="buttons.html#" class="navbar-brand"
					data-toggle="fullscreen"><img src="./buttons_files/logo.png"
					class="m-r-sm">Notebook</a> <a class="btn btn-link visible-xs"
					data-toggle="dropdown" data-target=".nav-user"> <i
					class="fa fa-cog"></i>
				</a>
			</div>
			<ul class="nav navbar-nav hidden-xs">
				<li class="dropdown"><a href="buttons.html#"
					class="dropdown-toggle dker" data-toggle="dropdown"> <i
						class="fa fa-building-o"></i> <span class="font-bold">Activity</span>
				</a>
					<section
						class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
						<div class="wrapper lter m-t-n-xs">
							<a href="buttons.html#" class="thumb pull-left m-r"> <img
								src="./buttons_files/avatar.jpg" class="img-circle">
							</a>
							<div class="clear">
								<a href="buttons.html#"><span class="text-white font-bold">@Mike
										Mcalidek</span></a> <small class="block">Art Director</small> <a
									href="buttons.html#" class="btn btn-xs btn-success m-t-xs">Upgrade</a>
							</div>
						</div>
						<div class="row m-l-none m-r-none m-b-n-xs text-center">
							<div class="col-xs-4">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">245</span> <small
										class="text-muted">Followers</small>
								</div>
							</div>
							<div class="col-xs-4 dk">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">55</span> <small
										class="text-muted">Likes</small>
								</div>
							</div>
							<div class="col-xs-4">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">2,035</span> <small
										class="text-muted">Photos</small>
								</div>
							</div>
						</div>
					</section></li>
				<li>
					<div class="m-t m-l">
						<a href="price.html"
							class="dropdown-toggle btn btn-xs btn-primary" title="Upgrade"><i
							class="fa fa-long-arrow-up"></i></a>
					</div>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
				<li class="hidden-xs"><a href="buttons.html#"
					class="dropdown-toggle dk" data-toggle="dropdown"> <i
						class="fa fa-bell"></i> <span
						class="badge badge-sm up bg-danger m-l-n-sm count"
						style="display: inline-block;">3</span>
				</a>
					<section class="dropdown-menu aside-xl">
						<section class="panel bg-white">
							<header class="panel-heading b-light bg-light">
								<strong>You have <span class="count"
									style="display: inline;">3</span> notifications
								</strong>
							</header>
							<div class="list-group list-group-alt animated fadeInRight">
								<a href="buttons.html#" class="media list-group-item"
									style="display: block;"><span
									class="pull-left thumb-sm text-center"><i
										class="fa fa-envelope-o fa-2x text-success"></i></span><span
									class="media-body block m-b-none">Sophi sent you a email<br>
									<small class="text-muted">1 minutes ago</small></span></a> <a
									href="buttons.html#" class="media list-group-item"> <span
									class="pull-left thumb-sm"> <img
										src="./buttons_files/avatar.jpg" alt="John said"
										class="img-circle">
								</span> <span class="media-body block m-b-none"> Use awesome
										animate.css<br> <small class="text-muted">10
											minutes ago</small>
								</span>
								</a> <a href="buttons.html#" class="media list-group-item"> <span
									class="media-body block m-b-none"> 1.0 initial released<br>
										<small class="text-muted">1 hour ago</small>
								</span>
								</a>
							</div>
							<footer class="panel-footer text-sm">
								<a href="buttons.html#" class="pull-right"><i
									class="fa fa-cog"></i></a> <a href="buttons.html#notes"
									data-toggle="class:show animated fadeInRight">See all the
									notifications</a>
							</footer>
						</section>
					</section></li>
				<li class="dropdown hidden-xs"><a href="buttons.html#"
					class="dropdown-toggle dker" data-toggle="dropdown"><i
						class="fa fa-fw fa-search"></i></a>
					<section class="dropdown-menu aside-xl animated fadeInUp">
						<section class="panel bg-white">
							<form role="search">
								<div class="form-group wrapper m-b-none">
									<div class="input-group">
										<input type="text" class="form-control" placeholder="Search">
										<span class="input-group-btn">
											<button type="submit" class="btn btn-info btn-icon">
												<i class="fa fa-search"></i>
											</button>
										</span>
									</div>
								</div>
							</form>
						</section>
					</section></li>
				<li class="dropdown"><a href="buttons.html#"
					class="dropdown-toggle" data-toggle="dropdown"> <span
						class="thumb-sm avatar pull-left"> <img
							src="./buttons_files/avatar.jpg">
					</span> John.Smith <b class="caret"></b>
				</a>
					<ul class="dropdown-menu animated fadeInRight">
						<span class="arrow top"></span>
						<li><a href="buttons.html#">Settings</a></li>
						<li><a href="profile.html">Profile</a></li>
						<li><a href="buttons.html#"> <span
								class="badge bg-danger pull-right">3</span> Notifications
						</a></li>
						<li><a href="docs.html">Help</a></li>
						<li class="divider"></li>
						<li><a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
						</li>
					</ul></li>
			</ul>
		</header>
		<section>
			<section class="hbox stretch">
				<!-- .aside -->
				<aside class="bg-light lter b-r aside-md hidden-print hidden-xs"
					id="nav">
					<section class="vbox">
						<header class="header bg-primary lter text-center clearfix">
							<div class="btn-group">
								<button type="button" class="btn btn-sm btn-dark btn-icon"
									title="New project">
									<i class="fa fa-plus"></i>
								</button>
								<div class="btn-group hidden-nav-xs">
									<button type="button"
										class="btn btn-sm btn-primary dropdown-toggle"
										data-toggle="dropdown">
										Switch Project <span class="caret"></span>
									</button>
									<ul class="dropdown-menu text-left">
										<li><a href="buttons.html#">Project</a></li>
										<li><a href="buttons.html#">Another Project</a></li>
										<li><a href="buttons.html#">More Projects</a></li>
									</ul>
								</div>
							</div>
						</header>
						<section class="w-f scrollable">
							<div class="slim-scroll" data-height="auto"
								data-disable-fade-out="true" data-distance="0" data-size="5px"
								data-color="#333333">
									<!-- nav -->
										<!-- nav -->
								<nav class="nav-primary hidden-xs">
									<ul class="nav">
										<li class="active"><a href="index.html" class="active">
												<i class="fa fa-dashboard icon"> <b class="bg-danger"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Workset</span>
										</a>
											<ul class="nav lt">
												<li class="active"><a href="index.html" class="active">
														<i class="fa fa-angle-right"></i> <span>Dashboard
															v1</span>
												</a></li>
												<li><a href="dashboard.html"> <i
														class="fa fa-angle-right"></i> <span>Dashboard v2</span>
												</a></li>
											</ul></li>
										<li><a href="#layout"> <i
												class="fa fa-columns icon"> <b class="bg-warning"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Layouts</span>
										</a>
											<ul class="nav lt">
												<li><a href="layout-c.html"> <i
														class="fa fa-angle-right"></i> <span>Color option</span>
												</a></li>
												<li><a href="layout-r.html"> <i
														class="fa fa-angle-right"></i> <span>Right nav</span>
												</a></li>
												<li><a href="layout-h.html"> <i
														class="fa fa-angle-right"></i> <span>Hbox Layout</span>
												</a></li>
												<li><a href="layout-boxed.html"> <i
														class="fa fa-angle-right"></i> <span>Boxed Layout</span>
												</a></li>
												<li><a href="layout-fluid.html"> <i
														class="fa fa-angle-right"></i> <span>Fluid Layout</span>
												</a></li>
											</ul></li>
										<li><a href="#uikit"> <i class="fa fa-flask icon">
													<b class="bg-success"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>UI kit</span>
										</a>
											<ul class="nav lt">
												<li><a href="buttons.html"> <i
														class="fa fa-angle-right"></i> <span>Buttons</span>
												</a></li>
												<li><a href="icons.html"> <b
														class="badge bg-info pull-right">369</b> <i
														class="fa fa-angle-right"></i> <span>Icons</span>
												</a></li>
												<li><a href="grid.html"> <i
														class="fa fa-angle-right"></i> <span>Grid</span>
												</a></li>
												<li><a href="widgets.html"> <b
														class="badge pull-right">8</b> <i
														class="fa fa-angle-right"></i> <span>Widgets</span>
												</a></li>
												<li><a href="components.html"> <i
														class="fa fa-angle-right"></i> <span>Components</span>
												</a></li>
												<li><a href="list.html"> <i
														class="fa fa-angle-right"></i> <span>List group</span>
												</a></li>
												<li><a href="#table"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Table</span>
												</a>
													<ul class="nav bg">
														<li><a href="table-static.html"> <i
																class="fa fa-angle-right"></i> <span>Table static</span>
														</a></li>
														<li><a href="table-datatable.html"> <i
																class="fa fa-angle-right"></i> <span>Datatable</span>
														</a></li>
														<li><a href="table-datagrid.html"> <i
																class="fa fa-angle-right"></i> <span>Datagrid</span>
														</a></li>
													</ul></li>
												<li><a href="#form"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Form</span>
												</a>
													<ul class="nav bg">
														<li><a href="form-elements.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	elements</span>
														</a></li>
														<li><a href="form-validation.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	validation</span>
														</a></li>
														<li><a href="form-wizard.html"> <i
																class="fa fa-angle-right"></i> <span>Form wizard</span>
														</a></li>
													</ul></li>
												<li><a href="chart.html"> <i
														class="fa fa-angle-right"></i> <span>Chart</span>
												</a></li>
												<li><a href="fullcalendar.html"> <i
														class="fa fa-angle-right"></i> <span>Fullcalendar</span>
												</a></li>
												<li><a href="portlet.html"> <i
														class="fa fa-angle-right"></i> <span>Portlet</span>
												</a></li>
												<li><a href="timeline.html"> <i
														class="fa fa-angle-right"></i> <span>Timeline</span>
												</a></li>
											</ul></li>
										<li><a href="#pages"> <i
												class="fa fa-file-text icon"> <b class="bg-primary"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Pages</span>
										</a>
											<ul class="nav lt">
												<li><a href="gallery.html"> <i
														class="fa fa-angle-right"></i> <span>Gallery</span>
												</a></li>
												<li><a href="profile.html"> <i
														class="fa fa-angle-right"></i> <span>Profile</span>
												</a></li>
												<li><a href="invoice.html"> <i
														class="fa fa-angle-right"></i> <span>Invoice</span>
												</a></li>
												<li><a href="intro.html"> <i
														class="fa fa-angle-right"></i> <span>Intro</span>
												</a></li>
												<li><a href="master.html"> <i
														class="fa fa-angle-right"></i> <span>Master</span>
												</a></li>
												<li><a href="gmap.html"> <i
														class="fa fa-angle-right"></i> <span>Google Map</span>
												</a></li>
												<li><a href="jvectormap.html"> <i
														class="fa fa-angle-right"></i> <span>Vector Map</span>
												</a></li>
												<li><a href="signin.html"> <i
														class="fa fa-angle-right"></i> <span>Signin</span>
												</a></li>
												<li><a href="signup.html"> <i
														class="fa fa-angle-right"></i> <span>Signup</span>
												</a></li>
												<li><a href="404.html"> <i
														class="fa fa-angle-right"></i> <span>404</span>
												</a></li>
											</ul></li>
										<li><a href="mail.html"> <b
												class="badge bg-danger pull-right">3</b> <i
												class="fa fa-envelope-o icon"> <b
													class="bg-primary dker"></b>
											</i> <span>Message</span>
										</a></li>
										<li><a href="notebook.html"> <i
												class="fa fa-pencil icon"> <b class="bg-info"></b>
											</i> <span>Notes</span>
										</a></li>
									</ul>
								</nav>
									<!-- / nav -->
								</div>
						</section>
						<footer class="footer lt hidden-xs b-t b-light">
							<div id="chat" class="dropup">
								<section class="dropdown-menu on aside-md m-l-n">
									<section class="panel bg-white">
										<header class="panel-heading b-b b-light">Active
											chats</header>
										<div class="panel-body animated fadeInRight">
											<p class="text-sm">No active chats.</p>
											<p>
												<a href="buttons.html#" class="btn btn-sm btn-default">Start
													a chat</a>
											</p>
										</div>
									</section>
								</section>
							</div>
							<div id="invite" class="dropup">
								<section class="dropdown-menu on aside-md m-l-n">
									<section class="panel bg-white">
										<header class="panel-heading b-b b-light">
											John <i class="fa fa-circle text-success"></i>
										</header>
										<div class="panel-body animated fadeInRight">
											<p class="text-sm">No contacts in your lists.</p>
											<p>
												<a href="buttons.html#" class="btn btn-sm btn-facebook"><i
													class="fa fa-fw fa-facebook"></i> Invite from Facebook</a>
											</p>
										</div>
									</section>
								</section>
							</div>
							<a href="buttons.html#nav" data-toggle="class:nav-xs"
								class="pull-right btn btn-sm btn-default btn-icon"> <i
								class="fa fa-angle-left text"></i> <i
								class="fa fa-angle-right text-active"></i>
							</a>
							<div class="btn-group hidden-nav-xs">
								<button type="button" title="Chats"
									class="btn btn-icon btn-sm btn-default" data-toggle="dropdown"
									data-target="#chat">
									<i class="fa fa-comment-o"></i>
								</button>
								<button type="button" title="Contacts"
									class="btn btn-icon btn-sm btn-default" data-toggle="dropdown"
									data-target="#invite">
									<i class="fa fa-facebook"></i>
								</button>
							</div>
						</footer>
					</section>
				</aside>
				<!-- /.aside -->
				<section id="content">
					<section class="vbox">
						<section class="scrollable padder">
							<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
								<li><a href="index.html"><i class="fa fa-home"></i>
										Home</a></li>
								<li><a href="buttons.html#">Elements</a></li>
								<li class="active">Components</li>
							</ul>
							<div class="row">
								<div class="col-md-6">
									<h4 class="m-t-xs">Button options</h4>
									<div class="doc-buttons">
										<a href="buttons.html#" class="btn btn-s-md btn-default">Default</a>
										<a href="buttons.html#" class="btn btn-s-md btn-primary">Primary</a>
										<a href="buttons.html#" class="btn btn-s-md btn-success">Success</a>
										<a href="buttons.html#" class="btn btn-s-md btn-info">Info</a>
										<a href="buttons.html#" class="btn btn-s-md btn-warning">Warning</a>
										<a href="buttons.html#" class="btn btn-s-md btn-danger">Danger</a>
										<a href="buttons.html#" class="btn btn-s-md btn-dark">Dark</a>
										<a href="buttons.html#"
											class="btn btn-s-md btn-default disabled">Disabled</a>
									</div>
									<h4 class="m-t">Button size</h4>
									<p>
										<a href="buttons.html#" class="btn btn-default btn-lg">Large
											button</a>
									</p>
									<p>
										<a href="buttons.html#" class="btn btn-default">Default
											button</a>
									</p>
									<p>
										<a href="buttons.html#" class="btn btn-default btn-sm">Small
											button</a>
									</p>
									<p>
										<a href="buttons.html#" class="btn btn-default btn-xs">Extra
											small button</a>
									</p>
									<h4 class="m-t-lg">Button dropdowns</h4>
									<p class="text-muted">Single button dropdowns</p>
									<div class="m-b-sm">
										<div class="btn-group">
											<button class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												Action <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Action</a></li>
												<li><a href="buttons.html#">Another action</a></li>
												<li><a href="buttons.html#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="buttons.html#">Separated link</a></li>
											</ul>
										</div>
										<div class="btn-group">
											<button class="btn btn-success dropdown-toggle"
												data-toggle="dropdown">
												Action <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Action</a></li>
												<li><a href="buttons.html#">Another action</a></li>
												<li><a href="buttons.html#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="buttons.html#">Separated link</a></li>
											</ul>
										</div>
									</div>
									<div class="m-b-sm">
										<div class="btn-group">
											<button class="btn btn-default btn-sm dropdown-toggle"
												data-toggle="dropdown">
												Action <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Action</a></li>
												<li><a href="buttons.html#">Another action</a></li>
												<li><a href="buttons.html#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="buttons.html#">Separated link</a></li>
											</ul>
										</div>
									</div>
									<div class="m-b-sm">
										<div class="btn-group">
											<button class="btn btn-default btn-xs dropdown-toggle"
												data-toggle="dropdown">
												Action <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Action</a></li>
												<li><a href="buttons.html#">Another action</a></li>
												<li><a href="buttons.html#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="buttons.html#">Separated link</a></li>
											</ul>
										</div>
									</div>
									<p class="text-muted">Split button dropdowns &amp;
										variation</p>
									<div class="m-b-sm">
										<div class="btn-group">
											<button class="btn btn-default">Action</button>
											<button class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Action</a></li>
												<li><a href="buttons.html#">Another action</a></li>
												<li><a href="buttons.html#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="buttons.html#">Separated link</a></li>
											</ul>
										</div>
										<div class="btn-group dropup">
											<button class="btn btn-default">Action</button>
											<button class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Action</a></li>
												<li><a href="buttons.html#">Another action</a></li>
												<li><a href="buttons.html#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="buttons.html#">Separated link</a></li>
											</ul>
										</div>
									</div>
									<h4 class="m-t-lg">Button with icon</h4>
									<p>
										<a href="buttons.html#" class="btn btn-default"><i
											class="fa fa-html5"></i> Html5</a> <a href="buttons.html#"
											class="btn btn-info"><i class="fa fa-css3"></i> CSS3</a>
									</p>
									<p>
										<a href="buttons.html#"
											class="btn btn-default btn-lg btn-block"><i
											class="fa fa-bars pull-right"></i> Block button with icon</a>
									</p>
									<p>
										<a href="buttons.html#" class="btn btn-default btn-block"><i
											class="fa fa-bars pull-left"></i> Block button with icon</a>
									</p>
									<h4 class="m-t-lg">Button icon</h4>
									<p id="social-buttons">
										<a href="buttons.html#" class="btn btn-sm btn-icon btn-info"><i
											class="fa fa-twitter"></i></a> <a href="buttons.html#"
											class="btn btn-sm btn-icon btn-success"><i
											class="fa fa-facebook"></i></a> <a href="buttons.html#"
											class="btn btn-sm btn-icon btn-danger"><i
											class="fa fa-google-plus"></i></a>
									</p>
									<h4 class="m-t-lg">Button icon rounded</h4>
									<p id="social-buttons">
										<a href="buttons.html#"
											class="btn btn-rounded btn-sm btn-icon btn-default"><i
											class="fa fa-twitter"></i></a> <a href="buttons.html#"
											class="btn btn-rounded btn-sm btn-icon btn-default"><i
											class="fa fa-facebook"></i></a> <a href="buttons.html#"
											class="btn btn-rounded btn-sm btn-icon btn-default"><i
											class="fa fa-google-plus"></i></a>
									</p>
								</div>
								<div class="col-md-6">
									<h4 class="m-t-xs">Rounded button</h4>
									<div class="doc-buttons">
										<a href="buttons.html#"
											class="btn btn-s-md btn-default btn-rounded">Default</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-primary btn-rounded">Primary</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-success btn-rounded">Success</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-info btn-rounded">Info</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-warning btn-rounded">Warning</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-danger btn-rounded">Danger</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-dark btn-rounded">Dark</a> <a
											href="buttons.html#"
											class="btn btn-s-md btn-default btn-rounded disabled">Disabled</a>
									</div>
									<h4 class="m-t-lg">Button groups</h4>
									<div class="m-b-sm">
										<div class="btn-group">
											<button type="button" class="btn btn-default">Left</button>
											<button type="button" class="btn btn-default">Middle</button>
											<button type="button" class="btn btn-default">Right</button>
										</div>
									</div>
									<p class="text-muted">Vertical button groups</p>
									<div class="btn-group-vertical m-b-sm">
										<button type="button" class="btn btn-default">Top</button>
										<button type="button" class="btn btn-default">Middle</button>
										<button type="button" class="btn btn-default">Bottom</button>
									</div>
									<p class="text-muted">Nested button groups</p>
									<div class="btn-group m-b-sm">
										<button type="button" class="btn btn-default">1</button>
										<button type="button" class="btn btn-success">2</button>
										<button type="button" class="btn btn-default">3</button>
										<div class="btn-group">
											<button type="button" class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												Dropdown <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="buttons.html#">Dropdown link</a></li>
												<li><a href="buttons.html#">Dropdown link</a></li>
												<li><a href="buttons.html#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
									<p class="text-muted">Justified button groups</p>
									<div class="m-b-sm">
										<div class="btn-group btn-group-justified">
											<a href="buttons.html#" class="btn btn-primary">Left</a> <a
												href="buttons.html#" class="btn btn-info">Middle</a> <a
												href="buttons.html#" class="btn btn-success">Right</a>
										</div>
									</div>
									<p class="text-muted">Multiple button groups</p>
									<div class="btn-toolbar">
										<div class="btn-group">
											<button type="button" class="btn btn-default">1</button>
											<button type="button" class="btn btn-default active">2</button>
											<button type="button" class="btn btn-default">3</button>
											<button type="button" class="btn btn-default">4</button>
										</div>
										<div class="btn-group">
											<button type="button" class="btn btn-default">5</button>
											<button type="button" class="btn btn-default">6</button>
											<button type="button" class="btn btn-default">7</button>
										</div>
										<div class="btn-group">
											<button type="button" class="btn btn-default">8</button>
										</div>
									</div>
									<h4 class="m-t-lg">Button components</h4>
									<p class="text-muted">
										<span>There are a few easy ways to quickly get started
											with Bootstrap, each one ...</span> <span class="text-muted hide"
											id="moreless"> appealing to a different skill level
											and use case. Read through to see what suits your particular
											needs.</span>
									</p>
									<p>
										<button href="#moreless" class="btn btn-sm btn-default"
											data-toggle="class:show">
											<i class="fa fa-plus text"></i> <span class="text">More</span>
											<i class="fa fa-minus text-active"></i> <span
												class="text-active">Less</span>
										</button>
									</p>
									<p>
										<button class="btn btn-default" id="btn-1" href="#btn-1"
											data-toggle="class:btn-success">
											<i class="fa fa-cloud-upload text"></i> <span class="text">Upload</span>
											<i class="fa fa-check text-active"></i> <span
												class="text-active">Success</span>
										</button>
										<button class="btn btn-default" data-toggle="button">
											<i class="fa fa-heart-o text"></i> <i
												class="fa fa-heart text-active text-danger"></i>
										</button>
										<button class="btn btn-default" data-toggle="button">
											<span class="text"> <i
												class="fa fa-thumbs-up text-success"></i> 25
											</span> <span class="text-active"> <i
												class="fa fa-thumbs-down text-danger"></i> 10
											</span>
										</button>
										<button class="btn btn-success"
											data-toggle="class:show inline" data-target="#spin"
											data-loading-text="Saving...">Save</button>
										<i class="fa fa-spin fa-spinner hide" id="spin"></i>
									</p>
									<div class="m-b-sm">
										<div class="btn-group" data-toggle="buttons">
											<label class="btn btn-sm btn-info active"> <input
												type="radio" name="options" id="option1"><i
												class="fa fa-check text-active"></i> Male
											</label> <label class="btn btn-sm btn-success"> <input
												type="radio" name="options" id="option2"><i
												class="fa fa-check text-active"></i> Female
											</label> <label class="btn btn-sm btn-primary"> <input
												type="radio" name="options" id="option3"><i
												class="fa fa-check text-active"></i> N/A
											</label>
										</div>
									</div>
									<div class="m-b-sm">
										<div class="btn-group" data-toggle="buttons">
											<label class="btn btn-sm btn-default"> <input
												type="checkbox" name="options" id="option1"> option1
											</label> <label class="btn btn-sm btn-default"> <input
												type="checkbox" name="options" id="option2"> option2
											</label>
										</div>
									</div>
									<h5 class="m-t-lg">Select Button</h5>
									<div class="btn-group m-r">
										<button data-toggle="dropdown"
											class="btn btn-sm btn-default dropdown-toggle">
											<span class="dropdown-label">Option1</span> <span
												class="caret"></span>
										</button>
										<ul class="dropdown-menu dropdown-select">
											<li class="active"><a href="buttons.html#"><input
													type="radio" name="d-s-r" checked="">Option1</a></li>
											<li><a href="buttons.html#"><input type="radio"
													name="d-s-r">Option2</a></li>
											<li><a href="buttons.html#"><input type="radio"
													name="d-s-r">Option3</a></li>
											<li class="disabled"><a href="buttons.html#"><input
													type="radio" name="d-s-r" disabled="">I'm disabled</a></li>
										</ul>
									</div>
									<h4 class="m-t-lg">
										<a href="buttons.html#" class="pull-right text-sm"
											data-toggle="class:btn-rounded"
											data-target="#social-buttons a">Toggle</a> Social buttons
									</h4>
									<p id="social-buttons">
										<a href="buttons.html#"
											class="btn btn-rounded btn-sm btn-twitter"><i
											class="fa fa-fw fa-twitter"></i> Twitter</a> <a
											href="buttons.html#"
											class="btn btn-rounded btn-sm btn-facebook"><i
											class="fa fa-fw fa-facebook"></i> Facebook</a> <a
											href="buttons.html#" class="btn btn-rounded btn-sm btn-gplus"><i
											class="fa fa-fw fa-google-plus"></i> Google+</a>
									</p>
								</div>
							</div>
						</section>
					</section>
					<a href="buttons.html#" class="hide nav-off-screen-block"
						data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
				</section>
				<aside class="bg-light lter b-l aside-md hide" id="notes">
					<div class="wrapper">Notification</div>
				</aside>
			</section>
		</section>
	</section>
	<!-- Bootstrap -->
	<!-- App -->
	<script src="./buttons_files/app.v1.js"></script>
	<script src="./buttons_files/app.plugin.js"></script>
</body>
</html>